<template>
  <div class="line-chart" id="lineChart">
  </div>
</template>

<script>
export default {
  props: {
    pageConfig: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      
    }
  },
  computed: {
    isDarkTheme () {
      return !!this.pageConfig.isDarkTheme
    }
  },
  mounted() {
    this.initLineChart();
  },
  methods: {
    initLineChart() {
      const lineChart = this.$echarts.init(document.getElementById('lineChart'));
       window.addEventListener('resize', () => {
        lineChart.resize();
      });

      const className = this.isDarkTheme ? 'custom-tooltip-dark' : 'custom-tooltip-light';

      const option = {
        tooltip: {
          trigger: 'axis',
          className: 'custom-tooltip',
          formatter: function (params) {
            let html = `
              <div class="${className}">
                <div class="title-box">
                  <div class="img-box"></div>
                  <span>${params[0].name}</span>
                </div>
                <div class="content-box">
                  <div class="left-box">
                    <div class="icon-box1"></div>
                    <span> ${params[0].seriesName + '  '} </span> 
                  </div>
                  <div><span class="orderNum"> ${params[0].value} </span><span class="unit">单</span></div>
                </div>
            `;
            return html;
          },
        },
        grid: {
          left: '5%',
          right: '5%',
          top: '5%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: {
          axisLabel: {
            color: '#FFFFFF',
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#FFFFFF',
            }
          },
          axisTick: {
            show: false,
          },
          data: ['履约计划', '渠道', '房屋', '电费', 'xxxxx', 'xxxxx', 'xxx'],
        },
        yAxis: {
          type: 'value',
          // name: '退单量',
          nameTextStyle: {
            // padding: 10,
            // color: '#fff',
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#FFFFFF',
            }
          },
          axisLabel: {
            color: '#FFFFFF',
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#FFFFFF',
            }
          },
        },
        series: [{
          name: '退单量',
          type: 'line',
          lineWidth: 2,
          smooth: true,
          symbol: 'circle',
          symbolSize: 6,
          // emphasis: { // 鼠标移入光晕效果
          //   itemStyle: {
          //     color: 'transparent', // 将颜色设置为透明，以便看到光晕效果
          //     borderColor: '#2f4554', // 光晕的边框颜色
          //     borderWidth: 3, // 光晕的边框宽度
          //     shadowBlur: 10, // 光晕的模糊大小
          //     shadowColor: 'rgba(0, 0, 0, 0.5)' // 光晕的颜色
          //   }
          // },
          itemStyle: {
            color: "#fff",
            borderColor: 'rgba(71, 159, 254, 0.3)',
            borderWidth: 13, // 光晕的边框宽度
          },
          animationDuration: 1500,
          animationEasing: 'quadraticIn', // 'cubicInOut', 'linear', 'quadraticIn', 'quadraticOut'
          lineStyle: {
            color: '#479FFE'
          },
          label: {
            show: true,
            position: 'top',
            color: '#fff',
            fontFamily: "TCloudNumber",
            textShadowColor: '#1298FF',
            textShadowBlur: 10,
            formatter: (params) => {
              return params.value;
            }
          },

          areaStyle: {
            color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(71, 159, 254, 0.58)'
            }, {
                offset: 1,
                color: 'rgba(71, 159, 254, 0)'
            }])
          },
          data: [150, 230, 224, 218, 135, 147, 260]
        }]
      };
      lineChart.setOption(option);
      lineChart.on('click', (params) => {
        console.log(params.name);
        this.$emit('handleOpenChargeBack', params.name);
      });

    }
  },
  
}
</script>

<style lang="scss" scoped>
  .line-chart {
    height: 100%;
    width: 100%;
  }
  
::v-deep .custom-tooltip {
  // width: 200px;
  // height: 180px;
  padding: 0 !important;
  border: none !important;
  background-color: transparent !important;
  // background: url("../css/detailTooltipBg-dark.png") no-repeat;
  // background-size: 100% 100%;
  .custom-tooltip-dark {
    width: 200px;
    height: 80px;
    color: #fff;
    font-size: 16px;
    padding: 10px;
    border-radius: 5px;
    background: url("../css/tootipBG-dark.png") no-repeat;
    background-size: 100% 100%;

    .title-box {
      display: flex;
      align-items: center;
      .img-box {
        height: 30px;
        width: 40px;
        background: url("../css/title-dark.png") no-repeat;
        background-size: 100% 100%;
      }
    }
    .content-box {
      height: 30px;
      padding: 0 0 0 8px;
      display: flex;
      flex-direction: row;
      align-items: baseline;
      justify-content: space-between;
      
      .left-box {
        display: flex;
        align-items: center;
      }
      .icon-box1 {
        height: 15px;
        width: 15px;
        margin: 0 10px 0 0;
        background: url("../css/tooltipIcon-dark1.png") no-repeat;
        background-size: 100% 100%;
      }
    }
    .orderNum {
      font-family: "TCloudNumber";
      font-size: 20px;
      letter-spacing: 0.8px;
      background: linear-gradient(180deg, #FFF 51.85%, #53B5FD 83.33%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  
    .unit {
      font-size: 14px;
    }
  }
}
  
</style>